<!--
 * @Description:
 * @Author: 
 * @Date: 2023-08-16 09:21:43
 * @LastEditor: 
 * @LastEditTime: 2023-08-19 14:58:34
 
-->


<template>
	<view class="page_content">
		<view class="head_content">
			<!-- #ifndef MP-TOUTIAO -->
				<CustomNavbar title="购买记录"></CustomNavbar>
			<!-- #endif -->
			
			<!--<view class="tabs_box">
				<u-tabs :scrollable="false" :lineWidth="0" :list="contentList" :current="contentCurrent" :activeStyle="tabsActiveStyle" :inactiveStyle="tabsInactiveStyle" lineColor="#EE7F33" @change="changeContent($event, 1)" />
			</view>-->
		</view>
		<!--<view class="main_content" v-if="contentList && contentList.length">
			<swiper style="height: 100%" :skip-hidden-item-layout="true" :current="contentCurrent" @change="changeContent($event, 2)">
				<swiper-item style="height: 100%;" v-for="(item, index) in contentList" :key="item.id">
					<scroll-view style="height: 100%" :scroll-y="true" :refresher-enabled="true" :refresher-threshold="100" :refresher-triggered="refreshStatus" @refresherrefresh="refreshHandle" @scrolltolower="bottomHandle" @scroll="scrollHandle">
						<view class="content_box">
							<view class="list">
								<view class="item" v-for="(lItem, lIndex) in item.list" :key="lIndex" @click="openVideoDetail(lItem.video.id, lItem.video.title, lItem.video.image, lItem.video.description)">
									<view class="img">
										<image class="image" :src="lItem.video.image" mode="aspectFill"></image>
									</view>
									<view class="info">
										<view class="title u-line-1">{{ lItem.video.title }}</view>
										<view class="text1 u-line-2">{{ lItem.video.description }}</view>
										<view class="text2">看到{{ lItem.episode.name }} / 共{{ lItem.video.episodes }}集</view>
										<view class="btns">
											<view class="button" v-if="item.id == 1" :class="{ collect: lItem.is_favorite == 1 }" hover-class="active" :hover-start-time="0" :hover-stay-time="200" @click.stop="handleCollect(lItem.vid, lItem.is_favorite, lIndex)">
												<u-icon :name="lItem.is_favorite == 1 ? 'star-fill' : 'star'" color="#eee" size="18"></u-icon>
												<text class="text">{{ lItem.is_favorite == 1 ? '已追剧' : '追剧' }}</text>
											</view>
											<view class="button" v-else hover-class="active" :hover-start-time="0" :hover-stay-time="200">
												<u-icon name="play-right-fill" color="#eee" size="18"></u-icon>
												<text class="text">立即观看</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="nodata" v-if="!item.list.length && item.status == 'nomore'">
								<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
							</view>
							<view class="liststatus" v-else>
								<u-loadmore :status="item.status" :line="true" />
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	-->
	<view class="">
		<view v-for="(item,index) in dataList" class="box" :key="item.id">
			<view class="order-info">
				<view class="">
					<text>订单编号:</text>
					<text>{{item.order_sn}}</text>
				</view>
				<view class="" style=" padding-top: 8rpx; display: flex; flex-direction: row; justify-content: space-between;">
					<text class="time">{{item.createtime}}</text>
					<text :class="{'pay-status': true, active: item.status_text === '已支付'}">{{item.status_text}}</text>
				</view>
			</view>
			<view class="order-money">
				<view class="order-money-item">
					<text class="one">{{item.title}}</text>
					<text>会员类型</text>
				</view>
				<view class="order-money-item">
					<text class="one">{{item.total_fee}}元</text>
					<text>支付金额</text>
				</view>
			</view>
			<!-- <view style="display:flex;flex-direction: column;text-align: center;">
				<text>{{item.title}}</text>
			</view>
			<view style="display:flex;flex-direction: column;text-align: center;">
				<text>{{item.total_fee}}元</text>
				<text>{{item.status_text}}</text>
			</view> -->
		</view>
	</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				navbarTitle: '影视视频',
				dataList:[],
				tabsActiveStyle: {
					
					color:  getApp().globalData.isColor,
					fontSize: '32rpx',
					fontWeight: 'bold',
				},
				tabsInactiveStyle: {
					color: '#666666'
				},
				contentList: [
					{ id: 1, name: '最近观看记录', type: 'log', list: [], page: 1, pagesize: 10, status: 'loadmore' },
					{ id: 2, name: '我的追剧记录', type: 'favorite', list: [], page: 1, pagesize: 10, status: 'loadmore' },
				],
				contentCurrent: 0,
				refreshStatus: true,
				isRefresh: false,
			}
		},
		onLoad() {
			//this.getPlayRecordList()
			this.getList()
		},
		methods: {
			//获取购买记录
			getList(){
				this.$request('order.list').then(res => {
					if(res.code === 1) {
						console.log("购买记录",res.data.data)
						res.data.data.forEach(i=>{
							this.dataList.push({
								order_sn:i.order_sn,
								title:i.vip.title,
								total_fee:i.total_fee,
								status_text:i.status_text,
								createtime:this.$utils.timestampToTime(i.createtime)
							})
						
						})
					}
				})
			},
			// 	收藏
			handleCollect(vid, collect, index) {
				if(collect == 0) {
					const obj = {
						vid,
						type: 'favorite'
					}
					this.$request('video.addRecord', obj, false).then(res => {
						if(res.code === 1) {
							this.contentList[this.contentCurrent].list[index].is_favorite = 1
						}
					})
				} else {
					const obj = {
						ids: vid,
						type: 'favorite'
					}
					this.$request('video.deleteRecord', obj, false).then(res => {
						if(res.code === 1) {
							this.contentList[this.contentCurrent].list[index].is_favorite = 0
						}
					})
				}
			},
			// 获取播放记录
			getPlayRecordList() {
				let  status = uni.getSystemInfoSync().uniPlatform
				
				const obj = {
					type: this.contentList[this.contentCurrent].type,
					page: this.contentList[this.contentCurrent].page,
					pagesize: this.contentList[this.contentCurrent].pagesize,
					platform: status == 'mp-weixin'? 2 :1,
				}
				this.contentList[this.contentCurrent].status = 'loading'
				this.$request('video.getRecord', obj).then(res => {
					if(res.code === 1) {
						if(res.data && res.data.length) {
							this.contentList[this.contentCurrent].list = this.contentList[this.contentCurrent].list.concat(res.data)
							if(res.data.length < this.contentList[this.contentCurrent].pagesize) {
								this.contentList[this.contentCurrent].status = 'nomore'
							} else {
								this.contentList[this.contentCurrent].status = 'loadmore'
							}
							console.log("这是啥",this.contentList[this.contentCurrent].list);
							this.contentList[this.contentCurrent].list=this.$utils.changeImages(this.contentList[this.contentCurrent].list)
						} else {
							this.contentList[this.contentCurrent].page > 1 && this.contentList[this.contentCurrent].page--
							const timer = setTimeout(() => {
								this.contentList[this.contentCurrent].status = 'nomore'
								clearTimeout(timer)
							}, 500)
						}
					}
					this.refreshStatus = false
					this.isRefresh = false
				}).catch(err => {
					this.refreshStatus = false
					this.isRefresh = false
				})
			},
			// 下拉刷新
			refreshHandle() {
				this.refreshStatus = true
				if(!this.isRefresh) {
					this.isRefresh = true
					this.contentList[this.contentCurrent].page = 1
					this.contentList[this.contentCurrent].list = []
					this.getPlayRecordList()
				}
			},
			// 滚动监听
			scrollHandle(e) {
				
			},
			// 触底滚动
			bottomHandle() {
				this.contentList[this.contentCurrent].page++
				this.getPlayRecordList()
			},
			// 切换分类
			changeContent(e, i) {
				const current = i === 1 ? e.index : e.detail.current
				if(current == this.contentCurrent) return
				this.contentCurrent = current
				!this.contentList[this.contentCurrent].list.length && this.getPlayRecordList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f9f9f9;
	}
	.box{
		// display: flex;
		// justify-content: space-between;
		// padding: 0 32rpx;
		// align-items: center;
		margin: 20px 32rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		overflow: hidden;
		.order-info {
			box-sizing: border-box;
			padding: 24rpx 30rpx;
			font-size: 28rpx;
			background-image: url("~@/static/images/uaer-record-bg.png");
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: top;
			.time {
				font-size: 24rpx;
				color: #4a4a4a;
				opacity: 0.4;
			}
			.pay-status {
				background: #f0f0f0;
				color: #9e9e9e;
				border-radius: 12rpx;
				padding: 4rpx 12rpx;
				font-size: 24rpx;
				position: relative;
				top: -44rpx;
				right: -12rpx;
				&.active {
					background: #498dff;
					color: #ffffff;
				}
			}
		}
		.order-money {
			margin: 0 32rpx 32rpx 32rpx;
			padding: 32rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			background: linear-gradient(90deg, rgba(255, 217, 175, 0.2) 0%, rgba(255, 108, 131, 0.2) 100%);
			// opacity: 0.1;
			.order-money-item {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: rgba(74, 74, 74, 0.6);
				.one {
					color: #4a4a4a;
					font-size: 36rpx;
					padding-bottom: 8rpx;
				}
				+.order-money-item {
					border-left: 1px solid rgba(74, 74, 74, 0.1);
				}
			}
		}
	}
	.page_content {
		overflow: hidden;
		
		.head_content {
			background: #ffffff;
			.tabs_box {
				padding: 0 100rpx;
			}
		}
		
		// .main_content {
		// 	overflow: hidden;

		// 	.content_box {
		// 		padding: 20rpx 40rpx 60rpx 40rpx;
				
		// 		.list {

		// 			.item {
		// 				margin-bottom: 40rpx;
		// 				display: flex;
		// 				align-items: center;
						
		// 				.img {
		// 					width: 206rpx;
		// 					height: 276rpx;
		// 					border-radius: 20rpx;
		// 					overflow: hidden;
							
		// 					.image {
		// 						width: 100%;
		// 						height: 100%;
		// 					}
		// 				}
						
		// 				.info {
		// 					flex: 1;
		// 					margin-left: 40rpx;
							
		// 					.title {
		// 						font-size: 32rpx;
		// 						color: #000;
		// 						font-weight: 700;
		// 					}
							
		// 					.text1 {
		// 						height: 68rpx;
		// 						font-size: 24rpx;
		// 						color: #666;
		// 						margin-top: 4rpx;
		// 						line-height: 34rpx;
		// 						margin: 10rpx 0;
		// 					}
							
		// 					.text2 {
		// 						font-size: 24rpx;
		// 						color: #111;
		// 						line-height: 34rpx;
		// 					}
							
		// 					.btns {
		// 						margin-top: 20rpx;
		// 						display: flex;
		// 						align-items: center;
		// 						justify-content: space-between;
								
		// 						.button {
		// 							width: calc((100% - 30rpx) / 2);
		// 							height: 60rpx;
		// 							display: flex;
		// 							align-items: center;
		// 							justify-content: center;
		// 							font-size: 28rpx;
		// 							background: #484B52;
		// 							border-radius: 10rpx;
		// 							color: #fff;
									
		// 							&.collect {
		// 								opacity: 0.6;
		// 							}
								
		// 							&.active {
		// 								background: rgba(#000, 0.9);
		// 							}
									
		// 							.text {
		// 								margin-left: 8rpx;
		// 							}
		// 						}
		// 					}
		// 				}
		// 			}
		// 		}
				
		// 		.nodata {
		// 			padding: 15vh 0;
		// 		}
		// 	}
		// }
	}
</style>